<template>
  <footer class="ts-footer">
    <router-link class="footer-tab-item" to="/index">
      <img class="icon-index" :src="getPath('weidianjishouye')"/>
      <span class="text-item">首页</span>
    </router-link>

    <router-link class="footer-tab-item" to="/order">
      <img class="icon-order" :src="getPath('weidianjidingdan')"/>
      <span class="text-item">订单</span>
    </router-link>

    <router-link class="footer-tab-item" to="/profile">
      <img class="icon-personal" :src="getPath('weidianjiwode')"/>
      <span class="text-item">我的</span>
    </router-link>
  </footer>
</template>

<script>
  export default {
    name: 'tsTabbar',
    data() {
      return {
        status: '',
        imgNames: {index: 'weidianjishouye', order: 'weidianjidingdan', profile: 'weidianjiwode'},
        getPath: (path) => {
          let currentRouterName = this.$route.name;
          if (this.imgNames[currentRouterName] === path) {
            path = path.substr(3);
          }
          return require(`../../../assets/imgs/widgets/${path}.png`)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variables";
  @import '../../../assets/css/mixin';

  .ts-footer {
    transition: all 0s;
    height: 0.96rem;
    z-index: $tabbarZIndex;
    @include fja(space-between);
    padding-top: .10rem;
    background-color: #fff;
    box-shadow: 0 -0.01667rem 0.01333rem rgba(152, 151, 166, 0.1);
    width: 100%;
    .footer-tab-item {
      flex: 1;
      display: block;
      width: 0;
      text-align: center;
      &.router-link-active {
        .text-item {
          color: $themeColor;
        }
      }
      .icon-index {
        @include wh(.4rem, .4rem);
      }
      .icon-order {
        @include wh(.32rem, .4rem);
      }
      .icon-personal {
        @include wh(.4rem, .4rem);
      }
      .text-item {
        @include sc(.19rem, #2E2E2E);
        display: block;
      }
    }
  }

</style>
